<template>
	<view class="content">
		<!-- 订单信息 -->
		<uni-section class="mb-10 width690" title="订单信息" type="line">
			<view class="goods-info">
			<!-- 套餐信息 -->
				<view class="meal" v-if="detail.order">
					<view class="mealInfo">
						<view class="mealInfo-left">
							<span>素材</span>
						</view>
						<view class="mealInfo-right">
							<span>共有 {{ videoList.length }} 份</span>
						</view>
					</view>
					<view class="mealInfo">
						<view class="mealInfo-left">
							<span>套餐</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ detail.order.setMealName}}</span>
						</view>
					</view>
					<view class="mealInfo">
						<view class="mealInfo-left">
							<span>套餐费用</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ detail.order.total}} 元</span>
						</view>
					</view>
					<view class="mealInfo">
						<view class="mealInfo-left">
							<span>创建时间</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ detail.order.orderTime}}</span>
						</view>
					</view>
				</view>
				<!-- 约拍 -->
				<view class="meal" v-if="detail.orderShoot">
					<view class="mealInfo">
						<view class="mealInfo-left">
							<span>摄影师</span>
						</view>
						<view class="mealInfo-right">
							<span :class="detail.orderShoot.cameramanName ? '' : 'grey'"> {{ detail.orderShoot.cameramanName ? detail.orderShoot.cameramanName : '暂未分配摄影师，请稍后' }} </span>
						</view>
					</view>
					<view class="mealInfo" v-if="address.id">
						<view class="mealInfo-left">
							<span>选择雪场</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ getSnow(detail.orderShoot.mealSnowId) }}</span>
						</view>
					</view>
					<view class="mealInfo">
						<view class="mealInfo-left">
							<span>约拍套餐</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ taocanDetail[0].setMealName }}</span>
						</view>
					</view>
					<view class="mealInfo">
						<view class="mealInfo-left">
							<span>约拍时长</span>
						</view>
						<view class="mealInfo-right">
							<span>{{ taocanDetail[0].duration }}秒</span>
						</view>
					</view>
				</view>
			</view>
		</uni-section>
		<!-- 更多服务 -->
		<uni-section class="mb-10" title="更多服务" type="line" v-if="detail.order">
			<view class="more-serve" v-if="checkboxList.length > 0">
				<!-- 更多 -->
				<view class="moreData">
					<checkbox-group>
						<label style="display: flex; justify-content: space-between;" v-for="(item, index) in checkboxList"
							:key="item.servicesId" :class="item.checked ? 'option_active checkCss':'option_default checkCss'" :disabled="true">
							<view class="left">
								<view class="checkboxHidden">
									<checkbox :value="item.servicesId" :checked="item.checked" />
								</view>
								<view class="checkTxt">
									<span>{{item.servicesName}}</span>
									<span class="huodong" v-if="(item.price-item.originalPrice) <= -1 && item.price >= 0"> (活动立减{{ item.originalPrice - item.price }}元) </span>
								</view>
							</view>
							<view class="right" style="margin-right: 20rpx;">
								<span class="lijian" v-if="item.price <= -1"> 立减 </span>
								<span class="shanchuhao" v-if="(item.price-item.originalPrice) <= -1 && item.price >= 0">￥{{ item.originalPrice }}</span>
								<span>{{item.price <= -1 ? "-":""}}￥{{Math.abs(item.price)}}</span>
							</view>
						</label>
					</checkbox-group>
				</view>
				
			</view>
		</uni-section>
		<!-- 素材确认 -->
		<uni-section class="mb-10" title="素材预览" type="line" v-if="detail.order">
			<view @touchmove.stop.prevent="() => {}" class="sucai-sure">
				<view class="line"></view>
				<view class="xuanze">
					<p>以下是您下单时所选择的素材~</p>
					<view class="xuanzeBox">
						<view :class="bianPaiId == index ? 'active':''" v-for="(item,index) in bianPaiData" :key="index">{{item.type}}</view>
					</view>
				</view>
				<!-- controlsList 表示控件的列表  controlsSize 表示每个控件的大小 -->
				<view class="drag">
					<view class="video-Box1">
						<scroll-view class="scroll-box" :scroll-y="true">
							<view class="list-box">
								<view v-for="(item,index) in videoList" :key="index" class="lists">
									<image @click="playVideo(item.mediaId)" :src="item.datas" v-if="item.datas"
										mode="widthFix"></image>
									<view @click="playVideo(item.mediaId)" class="play">
										<image :src="imageUrl + 'index/play-index.png'" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-section>
		
		<uni-section class="mb-10" title="成片预览" type="line" v-if="detail.order.orderStatus == 'completed'">
			<template v-slot:right>
				<p style="font-size: 22rpx;color:#F53F3F;">注：下载之后就不能再看了哦！</p>
			</template>
			<view class="sucai-sure">
				
			</view>
		</uni-section>
		
		<!-- 视频播放弹窗  background-color="#ffffff" -->
		<uni-popup @maskClick="maskclick" ref="popupskiingVideo" class="skiingVideo-Box">
			<view class="skiingVideo-list">
				<view class="title">
					<uni-icons type="closeempty" @click="toCloseVideo()"></uni-icons>
					<span>素材预览</span>
				</view>
				<video style="width: 100%;" v-if="indexVideo" :src="indexVideo">
					<view class="shuiyin">哇咔咔wakaka</view>
				</video>
			</view>
		</uni-popup>
		<!--  -->
	</view>

</template>

<script>
	import {
		getOrderDetail
	} from '@/api/order.js'
	import {
		getYuepaiDetail,
		getShootTC
	} from '@/api/yuepai.js'
	import {
		getMoreService
	} from '@/api/shoopcar.js'
	import {
		payMentInfo
	} from '@/api/payment.js'
	import {
		snowFieldList,
	} from '@/api/index.js'
	import {
		getMediaInfoi,
	} from '@/api/service.js'
	import {
		getUserData,
	} from '@/utils/storage.js'
	// 滑动组件
	// import dragAndDropSort from '@/components/drag-drop/drag-drop.vue'
	import imageConfig from '@/utils/images.js'
	import videoPlay from '@/pages/index/components/video-play/video-play.vue'
	export default {
		components: {
			videoPlay
			// dragAndDropSort,
		},
		data() {
			return {
				id:0,
				imageUrl:imageConfig.uploadImageUrl,
				mealData: [],
				taocan:[],
				checkboxList: [],
				// 更多服务id
				checkValue: [],
				// 选中素材id
				address: [],
				// 套餐数据
				mealDataList: [],
				videoList:[],
				bianPaiId:0,
				bianPaiData:[
					{type:'AI编排'},
					{type:'个人编排'}
				],
				detail:{},
				taocanDetail:[],
				// 存放视频弹窗
				indexVideo: null,
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.type == '0'){
				getOrderDetail(options.order).then(res =>{
					this.detail = res.data
					this.bianPaiId =  res.data.order.sortWay == 'AUTO' ? 0 : 1
					this.getMoreData()
					this.getUMimage()
				})
			}else{
				getYuepaiDetail(options.order).then(res =>{
					this.detail = res.data
					this.getSnowField()
					this.getShootMeal()
				})
			}
		},
		computed: {
	
		},
		methods: {
			// 播放视频
			playVideo(id) {
				// this.indexVideo = video
				getMediaInfoi({
					Action: 'GetMediaInfo',
					userId: getUserData().id,
					mediaId: id,
					urlUseage: 'Play'
				}).then(res => {
					this.indexVideo = res.GetMediaInfoResult.MediaInfo.FileInfoList[0].FileBasicInfo.FileUrl
				})
				this.$refs.popupskiingVideo.open("bottom")
			},
			getUMimage(){
				const data = this.detail.order.mediaCoverUrl.split(",")
				data.forEach(item =>{
					let image = item.split('?') // 先把图片拆出来，之后用来展示
					let newImage = image[0]
					let newData = image[1].split("&") // 这里拆出来用于传值的
					let newDatas = {
						image:newImage,
					}
					newData.forEach(i =>{
						let myClass = i.split('=')
						let newClass = {[myClass[0]]:myClass[1]}
						Object.assign(newDatas,newClass)
					})
					this.videoList.push(newDatas)
				})
				// console.log(a,data)
				const mediaIds = this.detail.order.mediaIds.split(",")
				for(let i = 0 ; i < this.videoList.length ; i++ ){
					Object.assign(this.videoList[i],{mediaId:mediaIds[i]})
					Object.assign(this.videoList[i],{datas:data[i]})
				}
			},
			
			// 获取更多服务数据
			getMoreData() {
				let id = this.detail.order.setMealId
				getMoreService(id).then((res) => {
					console.log(res)
					if (res.code === 200) {
						// 存入更多服务
						this.checkboxList = res.data
						this.getChecks()
					} else {
						uni.showToast({
							title: "更多服务获取失败"
						})
					}
				})
			},
			getChecks(){
				if(this.detail.order.moreServicesId){
					const datas = this.detail.order.moreServicesId.split(",")
					datas.forEach(item => {
						this.checkboxList.forEach(ele => {
							if (ele.servicesId == item) {
								this.$set(ele, 'checked', true)
								// this.getTarger()
							}
						})
					})
				}
			},
			getSnowField(){
				snowFieldList().then(res => {
					this.address = res.data
				})
			},
			// 获取约拍套餐
			getShootMeal() {
				getShootTC().then(res => {
					console.log(res)
					this.taocan = res.data
					this.taocanDetail = res.data.filter(i => i.id == this.detail.orderShoot.setMealShootId)
				})
			},
			getSnow(id){
				const data = this.address.filter(i => i.id == id)
				// console.log(data[0].snowDesc)
				return data[0].snowDesc
			},
			// 关闭素材弹窗
			toCloseVideo() {
				this.$refs.popupskiingVideo.close()
			},
		}
	}
</script>

<style lang="less">
	// 去掉uniPopup的padding
	.vue-ref {
		padding: 0 !important;
	}
</style>

<style lang="less" scoped>
	.content {
		background: linear-gradient(180deg , #4da6ff 0% , #4ca2ec 5% , #ffffff 11% , #ffffff 100%);
		min-height: 100vh;
		overflow: hidden;

		.sucai-sure,
		.goods-info,
		.more-serve {
			margin: 0 auto;
			// margin-top: 36rpx;
			width: 100%;
			padding-bottom: 30rpx;
			// background: #FFFFFF;
			// box-shadow: 0rpx 2rpx 5rpx 0rpx rgba(0, 0, 0, 0.19);
			// border-radius: 36rpx;

			h1 {
				margin-left: 18rpx;
				font-size: 33rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #0A0A0A;
				line-height: 82rpx;
			}

			.line {
				margin: 0 auto;
				width: 678rpx;
				height: 2rpx;
				background: #F2F2F2;
				margin-bottom: 30rpx;
			}

			.meal {
				margin: 0 20rpx;

				span {
					font-size: 24rpx;
					line-height: 1.8;
					color: #3D3D3D;
					display: block;
				}

				.mealInfo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 70rpx;

					.mealInfo-left {
						display: flex;
						align-items: center;

						image {
							margin-right: 12rpx;
							width: 25rpx;
							height: 25rpx;
						}
					}

					.mealInfo-right {
						&.grey{
							color: #eeeeee;
						}
					}
				}
			}

			.moreData {
				margin: 0 20rpx;
				font-size: 22rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #3D3D3D;
				line-height: 43rpx;

				.active {
					display: flex;
					justify-content: space-between;
				}

				.checkCss {
					display: flex;
					font-size: 22rpx;
					align-items: center;
					height: 70rpx;
					.right{
						font-size: 28rpx;
						color:#F53F3F;
						.lijian{
							font-size: 28rpx;
							color: #1D2129;
						}
						.shanchuhao{
							font-size: 28rpx;
							color: #C5C5C5;
							text-decoration-line: line-through;
						}
					}
					
				}

				// 选中的颜色
				.option_active {
					// color: orange;
					position: relative;
				}

				.option_active::after {
					content: '';
					position: absolute;
					// left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 27rpx;
					height: 27rpx;
					border-radius: 50%;
					background-color: #A7CCEF;
				}

				.option_active::before {
					content: '';
					position: absolute;
					left: 5rpx;
					top: 36%;
					transform: translateY(-50%);
					width: 18rpx;
					height: 10rpx;
					border-left: 2rpx solid #ffffff;
					border-bottom: 2rpx solid #ffffff;
					transform: rotate(-45deg);
					z-index: 4;
				}

				// 默认颜色
				.option_default {
					color: #000000;
					position: relative;
				}

				.option_default::after {
					content: '';
					position: absolute;
					// left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 27rpx;
					height: 27rpx;
					border-radius: 50%;
					border: 1rpx solid #A7CCEF;
					box-sizing: border-box;
				}

				.checkboxHidden {
					display: none;
				}

				.checkTxt {
					margin-left: 34rpx;
					.huodong{
						font-size: 24rpx;
						color: #4CA2EC;
					}
				}
			}

			.header {
				display: flex;
				justify-content: space-between;

				span {
					font-size: 22rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #EB1E1E;
					line-height: 82rpx;
					margin-right: 20rpx;
				}
			}

			.xuanze {
				display: flex;
				justify-content: space-between;

				p {
					margin-left: 20rpx;
					width: 300rpx;
					height: 59rpx;
					font-size: 22rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #010101;
				}
				.xuanzeBox{
					width: 300rpx;
					height: 54rpx;
					background-color: #efefef;
					overflow: hidden;
					border-radius: 27rpx;
					display: flex;
					justify-content: space-between;
					margin-right: 10rpx;
					
					>view{
						margin: 0 0;
						width: 150rpx;
						height: 54rpx;
						border-radius: 27rpx;
						font-size: 22rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #666666;
						text-align: center;
						line-height: 54rpx;
						&.active{
							background-color: #4da6ff;
							width: 150rpx;
							height: 54rpx;
							border-radius: 27rpx;
							color: #ffffff;
							// z-index: 1;
						}
					}
				}
			}

			.drag {
				overflow-x: scroll;
				margin: 0 auto;
				margin-bottom: 100rpx;
				.video-Box1 {
					padding-bottom: 150rpx;
					// padding-bottom: 100rpx;
					width: 690rpx;
					margin: 20rpx auto;
					// columns: 2; // 默认列数
					// column-gap: 20rpx; // 列间距
					
					.srcoll-bottom {
						text-align: center;
						padding-bottom: 120rpx;
						font-size: 24rpx;
						color: #86909C;
					}
				
					.list-box {
						// padding-bottom: 150rpx;
						columns: 2; // 默认列数
						column-gap: 20rpx; // 列间距
						width: 90%;
						margin: 0 auto;
						
						.lists {
							position: relative;
							overflow: hidden;
							break-inside: avoid;
							margin-bottom: 20rpx;
						
							>image {
								border-radius: 8rpx;
							}
						
							.play {
								position: absolute;
								right: 20rpx;
								top: 20rpx;
						
								image {
									width: 50rpx;
									height: 50rpx;
								}
							}
						
							image {
								width: 100%;
							}
						}
					}
				}
			}
		}

		.tButton {
			position: fixed;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			bottom: 0;
			width: 750rpx;
			height: 181rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 36rpx 36rpx 0rpx 0rpx;

			p {
				font-size: 20rpx;
				color: #393939;
			}

			span {
				margin-right: 18rpx;
				font-size: 33rpx;
				color: #000000;
			}

			button {
				margin: 0;
				margin-right: 20rpx;
				float: right;
				width: 254rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #A7CCEF;
				border-radius: 36rpx;
				font-size: 33rpx;
				color: #FFFFFF;
			}
		}

		.popup-contentBox {
			width: 750rpx;
			// height: 1080rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -6rpx 13rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 36rpx 36rpx 0rpx 0rpx;

			h1 {
				padding-top: 36rpx;
				padding-bottom: 72rpx;
				text-align: center;
				font-size: 43rpx;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				color: #000000;
			}

			.box {
				position: relative;
				margin: 0 auto;
				margin-bottom: 35rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 678rpx;
				height: 145rpx;
				background: #F2F2F2;
				border-radius: 14rpx;
				color: #000;

				.boxLeft {}

				.boxContent {
					text-align: center;
					
					h2 {
						font-size: 33rpx;
					}
					
					p {
						font-size: 22rpx;
					}
				}

				.boxRight {
					font-size: 33rpx;
					
					span {
						margin-right: 30rpx;
					}
					
					.border {
						position: absolute;
						right: 0;
						top: 0;
						width: 0rpx;
						height: 0rpx;
						border-top: 50rpx solid #FF9727;
						border-left: 50rpx solid transparent;
						border-right: 50rpx solid #FF9727;
						border-bottom: 50rpx solid transparent;
						// background-color: pink;
					}
					
					p {
						color: #ffffff;
						position: absolute;
						transform: rotate(45deg);
						top: 20rpx;
						right: 10rpx;
						font-size: 26rpx;
					}
				}
			}

			.active {
				background-color: #A7CCEF;
				color: #FFFFFF;
			}

			.btnList {
				margin: 0 50rpx;
				padding-bottom: 60rpx;
				// margin-top: 250rpx;
				height: 72rpx;
				display: flex;
				justify-content: space-between;

				h5 {
					line-height: 72rpx;
					font-size: 33rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #000000;
				}

				button {
					margin: 0 auto;
					width: 254rpx;
					height: 72rpx;
					background: #A7CCEF;
					border-radius: 36rpx;

					font-size: 33rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #FFFFFF;
					line-height: 72rpx;
				}
			}
		}
	}
	.uni-section{
		// background-color: transparent !important;
		width: 690rpx;
		margin: 0 auto;
		box-shadow: 0rpx 4rpx 20rpx rgba(165, 188, 209 , 0.25);
		margin-top: 30rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		overflow: hidden;
	}
	.uni-section .uni-section-header__decoration.line {
		background-color: #FF8D1A;
	}
	.width690{
		width: 690rpx;
		margin: 0 auto;
	}
	.skiingVideo-list {
			width: 100VW;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #ffffff;
			position: relative;
	
			.title {
			margin-top: 8VH;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			position: relative;
	
			.uni-icons {
				position: absolute;
				left: 20rpx;
				top: 0;
			}
		}
	
		.skiingVideo-button {
			position: absolute;
			top: 40%;
			right: 30rpx;
			bottom: 100rpx;
			display: flex;
			flex-direction: column;
			// align-items: center;
			// justify-content: flex-start;
			padding: 20rpx 0;
			align-items: center;
			font-size: 32rpx;
			color: #929292;
			text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
	
			image {
				width: 50rpx;
			}
			// view {
			// 	text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
			// 	font-weight: 600;
			// }
		}
		.shuiyin{
			position: absolute;
			width: 300rpx;
			height: 10rpx;
			left:30rpx;
			top:180rpx;
			color: #ffffff;
			font-size: 45rpx;
			opacity: 0.6;
			transform: rotate(-30deg);
			text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
		}
		.yuepai-button {
		// margin-top: 30rpx;
			top: 56%;
			position: absolute;
			right: 30rpx;
			bottom: 100rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: flex-start;
			padding: 30rpx 0;
			align-items: center;
			font-size: 32rpx;
			color: #929292;
			text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
	
			view {
				text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #ffffff, 0 0 40px #ffffff; //设置发光效果
				font-weight: 600;
			}
	
			.uni-icons {
				font-size: 50rpx !important;
				color: #929292 !important;
	
			}
	
			&.active {
				color: #4CA2EC;
	
				.uni-icons {
					font-size: 50rpx !important;
					color: #4CA2EC !important;
				}
			}
		}
	
		.videoBox {
			video {
				width: 100%;
			}
		}
	}
</style>